<template>
  <div class="cart">
    <!-- 中间一个div，高度内容撑 -->
    <div class="content">
      <van-swipe-cell v-for="item in cart" :key="item.id">
        <van-card
          :price="item.price"
          :desc="item.detail"
          :title="item.product"
          class="goods-card"
        >
          <template #thumb>
            <van-checkbox :value="item.state" @click="onChangeOne(item.id)"></van-checkbox>
            <!-- 图片 -->
            <div class="van-image">
              <img :src="item.picture" class="van-image__img" style="object-fit: cover;" />
            </div>
          </template>
          <template #num>
            <van-stepper value="prod.amount" theme="round" button-size="16" />
          </template>
        </van-card>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="removeFromCart(item.id)"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 商品推荐区域 -->
    <div class="bot">
      <h3>为你推荐</h3>
      <div class="recommended">
        <div class="item" v-for="item in productList" :key="item.id">
          <div class="top">
            <img :src="item.picture" alt />
          </div>
          <div class="cen">
            <p class="title">{{item.product}}</p>
            <p class="detail">{{item.detail}}</p>
          </div>
          <div class="bot">
            <div class="lef">
              <span class="price">￥{{item.price}}</span> |
              <span class="oldprice">{{item.oldprice}}</span>
            </div>
            <div class="rig">
              <van-icon name="shopping-cart-o" @click="addToCart(item.id)" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部结算栏 -->
    <van-submit-bar :price="totalPrice*100.tofixed" button-text="提交订单">
      <van-checkbox :value="checkAll" @click="onChangeAll(checkAll)">全选</van-checkbox>
      <!-- <template #tip>
        你的收货地址不支持同城送,
        <span>修改地址</span>
      </template>-->
    </van-submit-bar>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import request from "@/utils/request";
export default {
  name: "Cart",
  data() {
    return {
      productList: [],
      cartList: [
        {
          id: 1,
          name: "Cart",
          price: 0
        },
        {
          id: 2,
          name: "jack",
          price: 2
        }
      ]
    };
  },
  computed: {
    ...mapGetters("cart", ["cart", "checkAll",'totalPrice'])
  },

  methods: {
    ...mapMutations("cart", ["changeOne", "changeAll"]),
    // 移除购物车
    removeFromCart(id) {
      this.$store.commit("cart/removeFromCart", id);
    },
    // 添加购物车
    addToCart(id) {
      const prodArr = this.productList.filter(item => item.id == id);
      var prod;
      prodArr.forEach((key, val) => {
        prod = key;
      });
      this.$store.commit("cart/addToCart", prod);
    },
    // 更改单选
    onChangeOne(id) {
      this.changeOne(id);
      //
    },
    // 切换全选
    onChangeAll(checkAll) {
      this.changeAll(checkAll)
    }
  },
  created() {
    // 推荐商品列表
    request
      .get(
        `api/shop/list/category?categoryId=${Math.floor(Math.random() * 6 + 1)}`
      )
      .then(data => {
        this.productList = data.list;
      });
  }
};
</script>

<style lang="less" scoped>
body {
  background: #f4f4f4;
}
.cart {
  padding-top: 10px;
  background: #f4f4f4;
}
.content,
.recommended {
  width: 95%;
  margin: 20px auto;
  border-radius: 5px;
  background: #f4f4f4;
}
.van-swipe-cell {
  margin: 10px;
  border-radius: 5px;
  .van-card__thumb {
    display: flex;
    justify-content: space-between;
  }
}
.goods-card {
  margin: 0;
  background-color: white;
}
.delete-button {
  height: 100%;
}

// 推荐商品区
.bot {
  h3 {
    text-align: center;
    margin: 30px 0;
  }
  .recommended {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      width: 170px;
      height: 280px;
      margin-top: 10px;
      background: #fff;
      border-radius: 5px;
      .top {
        width: 90%;
        height: 170px;
        margin: 5px auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .cen {
        .title {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
        }
        .detail {
          font-size: 12px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
      .bot {
        line-height: 30px;
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        .lef {
          .price {
            color: red;
            font-size: 18px;
          }
          .oldprice {
            color: blue;
            font-size: 14px;
            text-decoration: line-through;
          }
        }
        .rig {
          margin-right: 10px;
          font-size: 18px;
          color: #f83f2e;
        }
      }
    }
  }
}
</style>
